<template>
    <div class="zt">
        <ul class="left_cell">
            <li v-for="item,index in left_menu" :key="index" @click="changeLeft(item)" :class="changeGlms==item?'leftchange':''">{{item}}</li> 
        </ul>
        <div class="right_cell">
          <ycsj v-if="changeGlms=='远程升级'" ref="ycsj"></ycsj>
          <sjbgl v-if="changeGlms=='升级包管理'" ref="sjbgl"></sjbgl>
        </div>
    </div>
</template>

<script>
import ycsj from '@/components/ycsj/ycsj.vue'//远程升级
import sjbgl from '@/components/ycsj/sjbgl.vue'//升级包管理
export default {
  components: { ycsj, sjbgl},
  name: '',
  data () {
    return {
      changeGlms:'远程升级', //切换左侧菜单
      left_menu:["远程升级","升级包管理"]
    }
  },
  mounted(){
    
  },
  methods:{
    changeLeft(item){
      let _this = this;
      _this.changeGlms = item;
    }
  }
}
</script>


<style scoped>
.right_cell{
  width: 100%;
  height: calc(100% + 24px);
  float: right;
}
.leftchange{
  color: #3C74E3 !important;
  opacity: 1 !important;
  border-bottom: 5px solid #3C74E3;
}
.left_cell>li:hover{
  cursor: pointer;
}
.left_cell>li{
  width: 10%;
  height: 92%;
  text-align: center;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  line-height: 36px;
  color: #000000;
  display: inline-block;
  margin-right: 16px;
}
.left_cell{
  width: 100%;
  height: 7%;
  padding-top: 8px;
  box-sizing: border-box;
  display: inline-block;
  background: #EBF1FC;
}
.zt {
    height: calc(100% - 120px);
}
</style>